<template>
    <div class="wl-query">
        <div class="query_content">
            <el-input clearable :q-data="mainKey" v-model="mainVal" :placeholder="mainPlaceholder">
                <template slot="prepend">
                    <span v-html="mainLabel"></span>
                </template>
            </el-input>
            <el-input v-if="showAdv" clearable v-for="(item, ind) in advances" v-model="advVals[ind]" :key="item.id" :q-data="item.key" :placeholder="item.placeholder">
                <template slot="prepend">
                    <span v-html="item.label"></span>
                </template>
            </el-input>
            <el-button @click="query" type="success">查询</el-button>
        </div>
        <div class="adv_query">
            <el-button @click="toggleAdv" type="success">高级查询</el-button>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        advances: {
            type: Array
        },

        main: {
            type: Object
        },
    },

    data() {
        return {
            showAdv: false,
            mainVal: "",
            advVals: []
        };
    },

    methods: {
        query() {
            var obj = {};
            if (this.mainVal !== "") {
                obj[this.mainKey] = this.mainVal;
            }
            var len = this.advances ? this.advances.length : 0;
            for (var i = 0; i < len; i++) {
                if (this.advVals[i] && this.advVals[i] !== "") {
                    obj[this.advances[i].key] = this.advVals[i];
                }
            }
            this.$emit("doQuery", obj);
        },
        toggleAdv() {
            this.showAdv = !this.showAdv;
            this.advVals.forEach((val, ind, arr) => {
                arr[ind] = "";
            });
        }
    },
    computed: {
        mainKey() {
            if (this.main) {
                return this.main.key;
            } else {
                return "no_main_key";
            }
        },
        mainLabel() {
            if (this.main) {
                return this.main.label;
            } else {
                return "no_main_label";
            }
        },
        mainPlaceholder() {
            if (this.main) {
                return this.main.placeholder;
            } else {
                return "";
            }
        }
    }
};
</script>
